import React, { Component } from 'react'
import { getGroupsData } from '../../../../network/home'
import { BASE_URL } from '../../../../assets/js/constant'
import './index.scss'
export default class Groups extends Component {
  state = {
    groupsData: []
  }
  componentDidMount() {
    this.getGroupsData()
  }

  // 获取租房小组数据
  getGroupsData = async () => {
    let res = await getGroupsData({
      url: '/home/groups',
      params: {
        area: 'AREA%7C88cff55c-aaa4-e2e0'
      }
    })
    this.setState({ groupsData: res.body })
  }

  // 渲染租房数据
  renderGrouds = () => {
    return (
      this.state.groupsData.map(item =>
        <div className="item" key={item.id}>
          <div className="desc">
            <p>{item.title}</p>
            <span>{item.desc}</span>
          </div>
          <img src={BASE_URL + item.imgSrc} alt="" />
        </div>
      )
    )
  }
  render() {
    return (
      <div className="groups">
        <h3 className="title">租房小组<span className="more">更多</span></h3>
        <div className="item-list">
          {this.renderGrouds()}
        </div>
      </div>
    )
  }
}
